{% extends "base.html" %}

{% block content %}
<div class="container-fluid">
    <!-- 用户基本信息卡片 -->
    <div class="row mb-4">
        <div class="col-md-4">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title mb-4">基本信息</h4>
                    <div class="d-flex align-items-center mb-3">
                        <div class="flex-shrink-0">
                            <div class="avatar avatar-xl">
                                <span class="avatar-text rounded-circle bg-primary">
                                    {{ user.username[0] | upper }}
                                </span>
                            </div>
                        </div>
                        <div class="flex-grow-1 ms-3">
                            <h5 class="mb-1">{{ user.username }}</h5>
                            <p class="text-muted mb-0">{{ user.membership_level }}</p>
                        </div>
                    </div>
                    <div class="border-top pt-3">
                        <div class="row">
                            <div class="col-6 mb-3">
                                <label class="form-label text-muted">邮箱</label>
                                <p class="mb-0">{{ user.email }}</p>
                            </div>
                            <div class="col-6 mb-3">
                                <label class="form-label text-muted">手机号</label>
                                <p class="mb-0">{{ user.phone or '未设置' }}</p>
                            </div>
                            <div class="col-6 mb-3">
                                <label class="form-label text-muted">注册时间</label>
                                <p class="mb-0">{{ user.registration_date.strftime('%Y-%m-%d') if user.registration_date else '未知' }}</p>
                            </div>
                            <div class="col-6 mb-3">
                                <label class="form-label text-muted">最后登录</label>
                                <p class="mb-0">{{ user.last_login.strftime('%Y-%m-%d %H:%M') if user.last_login else '暂无登录记录' }}</p>
                            </div>
                            <div class="col-6">
                                <label class="form-label text-muted">消费得分</label>
                                <p class="mb-0">{{ "%.2f"|format(user.consumption_score) }}</p>
                            </div>
                            <div class="col-6">
                                <label class="form-label text-muted">状态</label>
                                <p class="mb-0">
                                    <span class="badge bg-{{ 'success' if user.status else 'danger' }}" style="background-color: {{ '#2E7D32' if user.status else '#C62828' }} !important">
                                        {{ '活跃' if user.status else '非活跃' }}
                                    </span>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 用户标签卡片 -->
        <div class="col-md-4">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title mb-4">用户标签</h4>
                    <div class="d-flex flex-wrap gap-2">
                        {% for user_tag in user.tags %}
                        <span class="badge bg-primary" style="background-color: #1976D2 !important">{{ user_tag.tag.name }}</span>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 消费统计卡片 -->
        <div class="col-md-4">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title mb-4">消费统计</h4>
                    <div class="row">
                        <div class="col-6 mb-3">
                            <label class="form-label text-muted">总订单数</label>
                            <h5 class="mb-0">{{ orders|length }}</h5>
                        </div>
                        <div class="col-6 mb-3">
                            <label class="form-label text-muted">总消费金额</label>
                            <h5 class="mb-0">¥{{ "%.2f"|format(total_amount) }}</h5>
                        </div>
                        <div class="col-6">
                            <label class="form-label text-muted">平均订单金额</label>
                            <h5 class="mb-0">¥{{ "%.2f"|format(average_amount) }}</h5>
                        </div>
                        <div class="col-6">
                            <label class="form-label text-muted">最近消费</label>
                            <h5 class="mb-0">{{ last_order_date.strftime('%Y-%m-%d') if last_order_date else '无' }}</h5>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 消费趋势图表 -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title">消费趋势</h4>
                    <canvas id="consumptionTrendChart" height="100"></canvas>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 订单历史表格 -->
    <div class="card">
        <div class="card-body">
            <h4 class="card-title">订单历史</h4>
            <div class="table-responsive">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>订单编号</th>
                            <th>下单时间</th>
                            <th>订单金额</th>
                            <th>支付方式</th>
                            <th>订单状态</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for order in orders %}
                        <tr>
                            <td>{{ order.order_number }}</td>
                            <td>{{ order.order_date.strftime('%Y-%m-%d %H:%M') if order.order_date else '未知' }}</td>
                            <td>¥{{ "%.2f"|format(order.total_amount) }}</td>
                            <td>{{ order.payment_method }}</td>
                            <td>
                                <span class="badge bg-{{ get_order_status_color(order.status) }}">
                                    {{ order.status }}
                                </span>
                            </td>
                            <td>
                                <button class="btn btn-sm btn-primary" style="background-color: #1976D2; border-color: #1976D2" onclick="viewOrderDetails('{{ order.id }}')">
                                    查看详情
                                </button>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- 订单详情模态框 -->
<div class="modal fade" id="orderDetailsModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">订单详情</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div id="orderDetailsContent"></div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
// 初始化消费趋势图表
document.addEventListener('DOMContentLoaded', function() {
    const ctx = document.getElementById('consumptionTrendChart').getContext('2d');
    const chart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: {{ consumption_trend.dates | tojson }},
            datasets: [{
                label: '消费金额',
                data: {{ consumption_trend.amounts | tojson }},
                borderColor: 'rgb(75, 192, 192)',
                tension: 0.1
            }]
        },
        options: {
            responsive: true,
            plugins: {
                legend: {
                    display: false
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                        callback: function(value) {
                            return '¥' + value;
                        }
                    }
                }
            }
        }
    });
});

// 查看订单详情
function viewOrderDetails(orderId) {
    fetch(`/api/orders/${orderId}`)
        .then(response => response.json())
        .then(data => {
            const content = `
                <div class="mb-4">
                    <h6>订单信息</h6>
                    <div class="table-responsive">
                        <table class="table table-bordered">
                            <tr>
                                <th>订单编号</th>
                                <td>${data.order_number}</td>
                                <th>下单时间</th>
                                <td>${data.order_date}</td>
                            </tr>
                            <tr>
                                <th>支付方式</th>
                                <td>${data.payment_method}</td>
                                <th>支付时间</th>
                                <td>${data.payment_time}</td>
                            </tr>
                            <tr>
                                <th>订单状态</th>
                                <td>${data.status}</td>
                                <th>订单金额</th>
                                <td>¥${data.total_amount}</td>
                            </tr>
                        </table>
                    </div>
                </div>
                <div>
                    <h6>商品清单</h6>
                    <div class="table-responsive">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>商品名称</th>
                                    <th>单价</th>
                                    <th>数量</th>
                                    <th>小计</th>
                                </tr>
                            </thead>
                            <tbody>
                                ${data.items.map(item => `
                                    <tr>
                                        <td>${item.product.name}</td>
                                        <td>¥${item.price}</td>
                                        <td>${item.quantity}</td>
                                        <td>¥${(item.price * item.quantity).toFixed(2)}</td>
                                    </tr>
                                `).join('')}
                            </tbody>
                        </table>
                    </div>
                </div>
            `;
            document.getElementById('orderDetailsContent').innerHTML = content;
            new bootstrap.Modal(document.getElementById('orderDetailsModal')).show();
        })
        .catch(error => console.error('Error:', error));
}
</script>
{% endblock %}